<template>
	<view>
		<view class="w100 bg-blue" style="height: 80rpx;"></view>
		<view class="my-header bg-white">
			<view class="plr-36 ptb-40  bb">
				<view class="flex_l" @click="goLogin">
					<image src="../../static/default_img.png" mode=""></image>
					<view>
						<view class="size-32 ml-40">
							{{token?userInfo.show_name:'登录/注册'}}
						</view>
<!--						<view class="flex_l ml-40 mt-30" v-if="token&&userInfo.show_name==1&&userInfo.show_name==1">-->
<!--							<view class="gray-2">下线</view>-->
<!--							<u-switch class="mlr-20" v-model="driver_status" @change="change"></u-switch>-->
<!--							<view class="blue">订单提醒</view>-->
<!--						</view>-->
					</view>
				</view>
			</view>
      <view class="member">
        <view class="member-text">
          <text>邀请小伙伴</text>
          <text>赚更多钱，还有升级奖励</text>
        </view>
        <view class="member-button" @click="createPoster">邀请海报></view>
      </view>
      <!-- 海报显示 -->
      <u-popup v-model="showPoster" mode="center">
        <view style="overflow: hidden;">
          <image mode="aspectFit" style="width: 77vw;height: 67vh;padding: 20px 20px 70px;" show-menu-by-longpress="true" :src="posterImage"></image>
          <view style="display: flex;justify-content: space-around;margin: 25px;margin-top: -55px;">
<!--            <button class="shareBtn" open-type="share">分享给好友</button>-->
            <view class="shareBtn" >请长按图片进行保存邀请海报</view>
          </view>
        </view>
      </u-popup>
      <view class="w100" style="height: 20rpx;background: #F8F8F8;" v-if="token"></view>
      <distribute-panel :userInfo="allUserInfo" />
<!--      <u-cell-item title="邀请好友（10%佣金）" @click="goShare" v-if="token">-->
<!--        <view slot="icon" class="icon flex1 flex-middle mr-20">-->
<!--          <image src="../../static/share_img/share_icon.png" mode=""></image>-->
<!--        </view>-->
<!--      </u-cell-item>-->
<!--			<view class="plr-65 ptb-35 flex" @click="goWallet">-->
<!--				<view class="text-center">-->
<!--					<view class="">-->
<!--						￥{{token?income||0:0}}-->
<!--					</view>-->
<!--					<view class="size-28 gray-2 mt-10">-->
<!--						累计收入-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="text-center">-->
<!--					<view class="">-->
<!--						￥{{token?money||0:0}}-->
<!--					</view>-->
<!--					<view class="size-28 gray-2 mt-10">-->
<!--						账户余额-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="text-center">-->
<!--					<view class="">-->
<!--						￥{{token?today_money||0:0}}-->
<!--					</view>-->
<!--					<view class="size-28 gray-2 mt-10">-->
<!--						今日收入-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
		</view>
    <view class="w100" style="height: 20rpx;background: #F8F8F8;" v-if="token"></view>
    <u-cell-item title="实名认证" :class="[allUserInfo.shop_auth==0?'':allUserInfo.shop_auth==1?'active':allUserInfo.shop_auth==2?'active':'']"
                 :value="!token?'请登录':allUserInfo.shop_auth==0 || allUserInfo.shop_auth==-2?'未认证':allUserInfo.shop_auth==1?'已认证':allUserInfo.shop_auth==2?'待审核':'已拒绝'"
                 :arrow="allUserInfo.shop_auth==0?true:allUserInfo.shop_auth==1?false:allUserInfo.shop_auth==2?false:true" @click="goIDcard">
      <view slot="icon" class="icon flex1 flex-middle mr-20">
        <image src="../../static/my-1.png" mode=""></image>
      </view>
    </u-cell-item>
    <view class="flex plr-32 ptb-26" style="height: 103rpx;" v-if="token">
      <view class="flex" @click.stop="showModel=true" @click="goPay">
        <view class="icon mr-20">
          <image src="../../static/icon-vip.png" mode=""></image>
        </view>
        <view class="mr-20" style="font-weight: 700;">
          平台会员
        </view>
        <u-icon name="question-circle" color="#969799"></u-icon>
      </view>
        <view class="flex1 flex-middle" v-if="allUserInfo.is_vip == 0">
          <view class="">
            99元/年
          </view>
          <view>
            <button class="btn-vip" @click="buyVip">购买会员</button>
          </view>
        </view>
        <view class="flex1 flex-middle" v-if="userInfo.is_vip == 1">
          <view class="">
            正式会员<span style="font-size: 0.8rem;color: #797a7a">（{{allUserInfo.vip_end_time}}到期）</span>
          </view>
        </view>
    </view>

		<view class="w100" style="height: 20rpx;background: #F8F8F8;"></view>
		<u-cell-item title="我的订单" class="active" @click="goOrder">
			<view slot="icon" class="icon flex1 flex-middle mr-20">
				<image src="../../static/my-5.png" mode=""></image>
			</view>
		</u-cell-item>

		<view class="w100" style="height: 20rpx;background: #F8F8F8;"></view>
		<u-cell-item title="设置" @click="goSet">
			<view slot="icon" class="icon flex1 flex-middle mr-20">
				<image src="../../static/my-7.png" mode=""></image>
			</view>
		</u-cell-item>
		<u-cell-item title="联系我们" @click="goContact">
			<view slot="icon" class="icon flex1 flex-middle mr-20">
				<image src="../../static/my-8.png" mode=""></image>
			</view>
		</u-cell-item>
		<u-cell-item title="帮助中心" @click="goHelp">
			<view slot="icon" class="icon flex1 flex-middle mr-20">
				<image src="../../static/my-9.png" mode=""></image>
			</view>
		</u-cell-item>
		<u-cell-item title="关于我们" @click="goAbout">
			<view slot="icon" class="icon flex1 flex-middle mr-20">
				<image src="../../static/my-10.png" mode=""></image>
			</view>
		</u-cell-item>
		<view class="w100" style="height: 20rpx;background: #F8F8F8;"></view>
		<pay :show="show" @money="getmoney" @close="show=false"></pay>
		<u-modal v-model="showModel" content="2023年1月31日前购买会员每年仅需¥99，之后将恢复原价¥300元，非会员将无法接单！"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
  import distributePanel from '../../components/distribute-panel/index'
	export default {
		data() {
			return {
				fee: '', //平台服务费
				income: '', //累计收入
				money: '', //可提现金额
				today_money: '', //今日收入
				IDcard: '未认证',
				Driver: '未认证',
				Owner: '',
				show: false, //支付
				showModel: false,
        allUserInfo:'',
        showPoster:false, //展示海报
        posterImage:""
			}
		},
    components: {
      distributePanel
    },
		computed: {
			...mapState(['userInfo', 'token', 'tabList']),

			// hasSF() {
			// 	let a = false
			// 	this.tabList.forEach(item => {
			// 		if (item.id == 1) a = true
			// 	})
			// 	return a
			// },
			// hasDJ() {
			// 	let a = false
			// 	this.tabList.forEach(item => {
			// 		if (item.id == 0) a = true
			// 	})
			// 	return a
			// },
		},
		onLoad() {

		},
		onShow() {
			if (this.token) {
				this.getUserInfo()
				this.getmoney()
				// this.driver_status = this.userInfo.driver_status == 1 ? true : false
			}
		},
		methods: {
      getUserInfo(){
        this.$http('/api/ucenter/getUserInfo',{}, "GET").then(res => {
          this.allUserInfo = res
          this.$store.commit('getUserInfo', res.user_info)
        })
      },
			change(status) {
				console.log(status);
				this.$http('/addons/ddrive/user/driver_status', {
					status: status ? 0 : 1
				}, "POST").then(data => {
					this.$store.dispatch('updateUserInfo')
				})
			},
			toSflist() {
				uni.navigateTo({
					url: "/pages/shunfeng/pub-list"
				})
			},
      goShare(){
        uni.navigateTo({
          url: '/pages/my/share'
        })
      },
			goLogin() {
				if (!this.token) {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				}
			},
			goPay() {
				if (parseFloat(this.fee) > 0) {
					this.show = true
				}
			},
      buyVip(){
        // this.$http('/addons/ddrive/user/createVipOrder', {
        //   pay_method:1,
        //   remark:'购买300vip'
        // }, "POST").then(data => {
        //   uni.navigateTo({
        //     url:'/pages/huoyun/pay?id='+data.order_id
        //   })
        // })
        if (this.allUserInfo.shop_auth == -2 || this.allUserInfo.shop_auth == 0 || this.allUserInfo.shop_auth == -1) {
          uni.navigateTo({
            url: '/pages/my/owner/index'
          })
        }
      },
			goWallet() { //钱包
				if (this.token) {
					uni.navigateTo({
						url: '/pages/my/wallet'
					})
				} else {
					uni.showToast({
						title: '请登录',
						icon: 'none'
					})
				}
			},
			goIDcard() { //实名认证
				if (this.allUserInfo.shop_auth == -2 || this.allUserInfo.shop_auth == 0 || this.allUserInfo.shop_auth == -1) {
					uni.navigateTo({
						url: '/pages/my/owner/index'
					})
				}
			},
			goDriver() { //驾照认证
				if (this.userInfo.driver_verified == 0 || this.userInfo.driver_verified == -1) {
					uni.navigateTo({
						url: '/pages/my/Driver'
					})
				}
			},
			goOwner() { //车主认证
				if (this.userInfo.card_verified == 0 || this.userInfo.card_verified == -1) {
					uni.navigateTo({
						url: '/pages/my/owner/index'
					})
				}
			},
			goOrder() { //订单
				uni.navigateTo({
					url: '/pages/my/my-order'
				})
			},
			goSet() { //设置
				uni.navigateTo({
					url: '/pages/my/set/index'
				})
			},
			goContact() { //联系我们
				uni.navigateTo({
					url: '/pages/my/contact'
				})
			},
			goHelp() { //帮助中心
				uni.navigateTo({
					url: '/pages/my/help/index'
				})
			},
			goAbout() { //关于我们
				uni.navigateTo({
					url: '/pages/my/about'
				})
			},
			// 我的收入
			getmoney() {
				// this.$http('/addons/ddrive/user/userIncome', "POST").then(data => {
				// 	//console.log(data);
				// 	this.money = parseFloat(data.money).toFixed(2)
				// 	this.income = parseFloat(data.income).toFixed(2)
				// 	this.today_money = parseFloat(data.today_income).toFixed(2)
				// 	this.fee = data.platform_service_fee
				// })
			},
      createPoster() {
        if (this.token) {
          uni.showLoading({
            title: '生成中...'
          });

          this.$http('/api/distribution/getShareImg', {
              type:'web'
        },"GET").then(res => {
            if (res.level = "success") {
              uni.hideLoading();
              this.showPoster = true
              this.posterImage = res.share_img_url
              console.log(this.posterImage)
            } else {
              uni.hideLoading();
              uni.showToast({
                title: '生成失败',
                icon:'none'
              })
            }
          });
        }
      },
      //保存图片到手机
      saveImage() {
        this.showPoster=false
        uni.showActionSheet({
          itemList:['保存图片到相册'],
          success: () => {
            uni.downloadFile({
              url: this.posterImage,
              success:(res)=>{
                console.log(res)
                var imageUrl=res.tempFilePath;//临时文件路径
                uni.saveImageToPhotosAlbum({ //保存图片到系统相册
                  filePath: imageUrl,
                  success: (res) => {
                    console.log('图片保存成功');
                  },
                  fail: (err) => {
                    console.log('图片保存失败');
                  }
                })
              }
            });
          }
        })
        // wx.authorize({
        //   scope: 'scope.writePhotosAlbum',
        //   success: (res) => {
        //     wx.showLoading({
        //       title: "保存中"
        //     })
        //     wx.downloadFile({
        //       url: this.posterImage,
        //       success: (res) => {
        //         wx.saveImageToPhotosAlbum({
        //           filePath: res.tempFilePath,
        //           complete: () => {
        //             wx.hideLoading()
        //           }
        //         })
        //       }
        //     })
        //
        //   },
        //   fail: (res) => {
        //     wx.hideLoading()
        //   }
        // })
      },
		}
	}
</script>

<style lang="scss" scoped>
	.my-header {
		margin-top: -20rpx;
		border-radius: 10rpx 10rpx 0 0;

		image {
			width: 104rpx;
			height: 104rpx;
		}
	}

	.left {
		height: 42rpx;
	}

	.icon {
		image {
			width: 42rpx;
			height: 42rpx;
		}
	}

	.active {
		/deep/.u-cell__value {
			color: $blue;
		}
	}

	.red {
		/deep/.u-cell__value {
			color: $red;
		}
	}
  .btn-vip{
    height:2.0rem;
    line-height: 1.5rem;
    font-size: 0.8rem;
    background-color: #1098dc;
    color: white;
    padding: 0.3rem;
    border-radius: 0.2rem;
    margin-left: 0.2rem;
  }

  .member{
    //width: calc(100vw - 60rpx);
    height: 140rpx;
    //position: absolute;
    //top: 280rpx;
    //// bottom: -26px;
    //left: 50%;
    //transform: translateX(-50%);
    background-color: #2C2C2C;
    //border-radius: 20rpx;
    /* background-image: url(../../static/person/member_content.png);
    background-size: 100% auto;
    background-repeat: no-repeat; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    .member-text{
      color: #F2C991;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      margin-left: 28px;
    }
    .member-button{
      width: 80px;
      height: 30px;
      background-color: #EBC28D;
      border-radius: 15px;
      line-height: 30px;
      text-align: center;
      font-size: 12px;
      color: #3A362D;
      margin-right: 15px;
    }
  }
</style>
